<template>
	<view class="number-container">
		<!-- 游戏状态：说明 -->
		<view v-if="gameState === 'instruction'" class="instruction-section">
			<view class="title">数字记忆测试</view>
			<view class="instruction-content">
				<view class="instruction-item">
					<text class="icon">🔢</text>
					<text class="text">记住屏幕上显示的数字序列</text>
				</view>
				<view class="instruction-item">
					<text class="icon">⏱️</text>
					<text class="text">数字会显示一定时间后消失</text>
				</view>
				<view class="instruction-item">
					<text class="icon">✍️</text>
					<text class="text">在输入框中输入相同的数字</text>
				</view>
				<view class="instruction-item">
					<text class="icon">🎯</text>
					<text class="text">每轮成功后数字长度会增加</text>
				</view>
			</view>
			
			<view class="difficulty-selector">
				<view class="difficulty-title">选择难度</view>
				<view class="difficulty-options">
					<view 
						v-for="level in difficultyLevels" 
						:key="level.value"
						:class="['difficulty-option', { active: selectedDifficulty === level.value }]"
						@click="selectDifficulty(level.value)"
					>
						<view class="difficulty-name">{{ level.name }}</view>
						<view class="difficulty-desc">{{ level.desc }}</view>
					</view>
				</view>
			</view>
			
			<button class="start-btn" @click="startGame">开始测试</button>
		</view>
		
		<!-- 游戏状态：准备 -->
		<view v-if="gameState === 'ready'" class="ready-section">
			<view class="ready-title">准备开始</view>
			<view class="ready-info">
				<view class="level-info">第 {{ currentLevel }} 轮</view>
				<view class="sequence-info">需要记忆 {{ currentSequence.length }} 位数字</view>
			</view>
			<view class="countdown">{{ countdown }}</view>
		</view>
		
		<!-- 游戏状态：显示数字 -->
		<view v-if="gameState === 'showing'" class="showing-section">
			<view class="game-header">
				<view class="level-indicator">第 {{ currentLevel }} 轮</view>
				<view class="progress-bar">
					<view class="progress" :style="{ width: showProgress + '%' }"></view>
				</view>
			</view>
			
			<view class="instruction-text">请记住这串数字</view>
			
			<view class="number-display">
				<view class="number-sequence">{{ currentSequence }}</view>
			</view>
			
			<view class="time-remaining">
				剩余时间：{{ Math.ceil(timeRemaining / 1000) }}s
			</view>
		</view>
		
		<!-- 游戏状态：用户输入 -->
		<view v-if="gameState === 'input'" class="input-section">
			<view class="game-header">
				<view class="level-indicator">第 {{ currentLevel }} 轮</view>
				<view class="input-progress">
					{{ userInput.length }} / {{ currentSequence.length }}
				</view>
			</view>
			
			<view class="instruction-text">请输入刚才看到的数字</view>
			
			<view class="input-area">
				<view class="input-display">
					<view class="input-label">你的输入：</view>
					<view class="input-value">{{ userInput || '请输入数字...' }}</view>
				</view>
				
				<view class="number-keyboard">
					<view 
						v-for="num in [1,2,3,4,5,6,7,8,9,0]" 
						:key="num"
						class="keyboard-btn"
						@click="inputNumber(num)"
					>
						{{ num }}
					</view>
				</view>
				
				<view class="input-actions">
					<button class="action-btn secondary" @click="clearInput">
						清空
					</button>
					<button class="action-btn secondary" @click="deleteLastDigit" :disabled="userInput.length === 0">
						删除
					</button>
					<button class="action-btn primary" @click="submitInput" :disabled="userInput.length !== currentSequence.length">
						提交
					</button>
				</view>
			</view>
		</view>
		
		<!-- 游戏状态：结果 -->
		<view v-if="gameState === 'result'" class="result-section">
			<view class="result-header">
				<view class="result-icon">{{ isCorrect ? '🎉' : '😔' }}</view>
				<view class="result-title">{{ isCorrect ? '答对了！' : '答错了！' }}</view>
			</view>
			
			<view class="number-comparison">
				<view class="comparison-row">
					<view class="comparison-label">正确答案：</view>
					<view class="comparison-value correct">{{ currentSequence }}</view>
				</view>
				<view class="comparison-row">
					<view class="comparison-label">你的答案：</view>
					<view :class="['comparison-value', isCorrect ? 'correct' : 'wrong']">{{ userInput || '未输入' }}</view>
				</view>
			</view>
			
			<view class="accuracy-display" v-if="!isCorrect">
				<view class="accuracy-title">准确率分析</view>
				<view class="digit-comparison">
					<view 
						v-for="(digit, index) in currentSequence.split('')" 
						:key="index"
						:class="['digit-item', {
							correct: userInput[index] === digit,
							wrong: userInput[index] !== digit
						}]"
					>
						<view class="digit-correct">{{ digit }}</view>
						<view class="digit-user">{{ userInput[index] || '?' }}</view>
					</view>
				</view>
				<view class="accuracy-rate">准确率：{{ Math.round(accuracy * 100) }}%</view>
			</view>
			
			<view class="result-stats">
				<view class="stat-item">
					<view class="stat-value">{{ currentLevel }}</view>
					<view class="stat-label">当前轮次</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">{{ score }}</view>
					<view class="stat-label">当前得分</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">{{ Math.round(reactionTime) }}ms</view>
					<view class="stat-label">反应时间</view>
				</view>
			</view>
			
			<view class="result-actions">
				<button v-if="isCorrect" class="action-btn primary" @click="nextLevel">
					下一轮
				</button>
				<button v-else class="action-btn secondary" @click="retryLevel">
					重试
				</button>
				<button class="action-btn secondary" @click="endGame">
					结束游戏
				</button>
			</view>
		</view>
		
		<!-- 游戏状态：最终结果 -->
		<view v-if="gameState === 'final'" class="final-section">
			<view class="final-header">
				<view class="final-icon">🏆</view>
				<view class="final-title">测试完成</view>
				<view class="final-subtitle">{{ getFinalMessage() }}</view>
			</view>
			
			<view class="final-stats">
				<view class="final-stat-item">
					<view class="final-stat-value">{{ maxLevel }}</view>
					<view class="final-stat-label">最高轮次</view>
				</view>
				<view class="final-stat-item">
					<view class="final-stat-value">{{ finalScore }}</view>
					<view class="final-stat-label">最终得分</view>
				</view>
				<view class="final-stat-item">
					<view class="final-stat-value">{{ Math.round(averageReactionTime) }}ms</view>
					<view class="final-stat-label">平均反应时间</view>
				</view>
				<view class="final-stat-item">
					<view class="final-stat-value">{{ getGrade() }}</view>
					<view class="final-stat-label">评级</view>
				</view>
			</view>
			
			<view class="performance-analysis">
				<view class="analysis-title">表现分析</view>
				<view class="analysis-content">
					<view class="analysis-item">
						<text class="analysis-label">数字记忆：</text>
						<text class="analysis-value">{{ getMemoryRating() }}</text>
					</view>
					<view class="analysis-item">
						<text class="analysis-label">输入速度：</text>
						<text class="analysis-value">{{ getSpeedRating() }}</text>
					</view>
					<view class="analysis-item">
						<text class="analysis-label">准确程度：</text>
						<text class="analysis-value">{{ getAccuracyRating() }}</text>
					</view>
				</view>
			</view>
			
			<view class="final-actions">
				<button class="action-btn primary" @click="restartGame">再次测试</button>
				<button class="action-btn secondary" @click="goHome">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 游戏状态
const gameState = ref('instruction') // instruction, ready, showing, input, result, final
const selectedDifficulty = ref('normal')
const currentLevel = ref(1)
const maxLevel = ref(1)
const score = ref(0)
const finalScore = ref(0)
const isCorrect = ref(false)
const countdown = ref(3)
const accuracy = ref(0)

// 数字序列相关
const currentSequence = ref('')
const userInput = ref('')

// 时间相关
const showProgress = ref(0)
const timeRemaining = ref(0)
const reactionTime = ref(0)
const averageReactionTime = ref(0)
const reactionTimes = ref([])
const startTime = ref(0)
const inputStartTime = ref(0)

// 定时器
let countdownTimer = null
let showTimer = null
let progressTimer = null
let timeTimer = null

// 难度配置
const difficultyLevels = ref([
	{
		value: 'easy',
		name: '简单',
		desc: '3-6位数字，显示时间较长',
		startLength: 3,
		maxLength: 6,
		showDuration: 3000, // 3秒
		increment: 1
	},
	{
		value: 'normal',
		name: '普通',
		desc: '4-8位数字，显示时间适中',
		startLength: 4,
		maxLength: 8,
		showDuration: 2500, // 2.5秒
		increment: 1
	},
	{
		value: 'hard',
		name: '困难',
		desc: '5-12位数字，显示时间较短',
		startLength: 5,
		maxLength: 12,
		showDuration: 2000, // 2秒
		increment: 1
	}
])

// 当前难度配置
const currentDifficulty = computed(() => {
	return difficultyLevels.value.find(d => d.value === selectedDifficulty.value)
})

// 生成随机数字序列
const generateSequence = () => {
	const difficulty = currentDifficulty.value
	const baseLength = difficulty.startLength
	const extraLength = Math.min((currentLevel.value - 1) * difficulty.increment, difficulty.maxLength - baseLength)
	const sequenceLength = baseLength + extraLength
	
	let sequence = ''
	for (let i = 0; i < sequenceLength; i++) {
		sequence += Math.floor(Math.random() * 10).toString()
	}
	return sequence
}

// 选择难度
const selectDifficulty = (difficulty) => {
	selectedDifficulty.value = difficulty
}

// 开始游戏
const startGame = () => {
	resetGame()
	startLevel()
}

// 重置游戏
const resetGame = () => {
	currentLevel.value = 1
	maxLevel.value = 1
	score.value = 0
	reactionTimes.value = []
	clearAllTimers()
}

// 开始关卡
const startLevel = () => {
	gameState.value = 'ready'
	currentSequence.value = generateSequence()
	userInput.value = ''
	showProgress.value = 0
	
	// 倒计时
	countdown.value = 3
	countdownTimer = setInterval(() => {
		countdown.value--
		if (countdown.value <= 0) {
			clearInterval(countdownTimer)
			showSequence()
		}
	}, 1000)
}

// 显示数字序列
const showSequence = () => {
	gameState.value = 'showing'
	startTime.value = Date.now()
	
	const difficulty = currentDifficulty.value
	timeRemaining.value = difficulty.showDuration
	
	// 进度条和倒计时
	progressTimer = setInterval(() => {
		const elapsed = Date.now() - startTime.value
		showProgress.value = Math.min((elapsed / difficulty.showDuration) * 100, 100)
		timeRemaining.value = Math.max(0, difficulty.showDuration - elapsed)
		
		if (elapsed >= difficulty.showDuration) {
			clearInterval(progressTimer)
			startInput()
		}
	}, 50)
}

// 开始输入阶段
const startInput = () => {
	gameState.value = 'input'
	inputStartTime.value = Date.now()
}

// 输入数字
const inputNumber = (num) => {
	if (userInput.value.length < currentSequence.value.length) {
		userInput.value += num.toString()
	}
}

// 删除最后一位数字
const deleteLastDigit = () => {
	if (userInput.value.length > 0) {
		userInput.value = userInput.value.slice(0, -1)
	}
}

// 清空输入
const clearInput = () => {
	userInput.value = ''
}

// 提交输入
const submitInput = () => {
	const endTime = Date.now()
	reactionTime.value = endTime - inputStartTime.value
	reactionTimes.value.push(reactionTime.value)
	
	// 检查答案
	isCorrect.value = userInput.value === currentSequence.value
	
	// 计算准确率（逐位比较）
	let correctDigits = 0
	const maxLength = Math.max(userInput.value.length, currentSequence.value.length)
	for (let i = 0; i < maxLength; i++) {
		if (userInput.value[i] === currentSequence.value[i]) {
			correctDigits++
		}
	}
	accuracy.value = correctDigits / currentSequence.value.length
	
	// 计算得分
	if (isCorrect.value) {
		const baseScore = currentLevel.value * 100
		const lengthBonus = currentSequence.value.length * 10
		const speedBonus = Math.max(0, 10000 - reactionTime.value) / 100
		const difficultyMultiplier = selectedDifficulty.value === 'easy' ? 1 : selectedDifficulty.value === 'normal' ? 1.5 : 2
		score.value += Math.round((baseScore + lengthBonus + speedBonus) * difficultyMultiplier)
	} else {
		// 部分分数基于准确率
		const partialScore = Math.round(accuracy.value * currentLevel.value * 50)
		score.value += partialScore
	}
	
	gameState.value = 'result'
}

// 下一关
const nextLevel = () => {
	currentLevel.value++
	maxLevel.value = Math.max(maxLevel.value, currentLevel.value)
	startLevel()
}

// 重试关卡
const retryLevel = () => {
	startLevel()
}

// 结束游戏
const endGame = () => {
	finalScore.value = score.value
	averageReactionTime.value = reactionTimes.value.reduce((a, b) => a + b, 0) / reactionTimes.value.length || 0
	gameState.value = 'final'
	saveGameData()
}

// 重新开始游戏
const restartGame = () => {
	gameState.value = 'instruction'
	resetGame()
}

// 返回首页
const goHome = () => {
	uni.navigateBack()
}

// 获取最终消息
const getFinalMessage = () => {
	if (maxLevel.value >= 15) return '数字记忆大师！'
	if (maxLevel.value >= 10) return '记忆力超群！'
	if (maxLevel.value >= 7) return '表现不错！'
	if (maxLevel.value >= 5) return '还需努力！'
	return '继续加油！'
}

// 获取评级
const getGrade = () => {
	if (maxLevel.value >= 15) return 'S+'
	if (maxLevel.value >= 12) return 'S'
	if (maxLevel.value >= 10) return 'A'
	if (maxLevel.value >= 8) return 'B'
	if (maxLevel.value >= 6) return 'C'
	return 'D'
}

// 获取记忆能力评级
const getMemoryRating = () => {
	if (maxLevel.value >= 15) return '超凡'
	if (maxLevel.value >= 12) return '优秀'
	if (maxLevel.value >= 9) return '良好'
	if (maxLevel.value >= 6) return '一般'
	return '需要提高'
}

// 获取输入速度评级
const getSpeedRating = () => {
	if (averageReactionTime.value < 3000) return '很快'
	if (averageReactionTime.value < 5000) return '较快'
	if (averageReactionTime.value < 8000) return '一般'
	return '较慢'
}

// 获取准确程度评级
const getAccuracyRating = () => {
	const totalAccuracy = reactionTimes.value.length > 0 ? (score.value / (maxLevel.value * 200)) : 0
	if (totalAccuracy >= 0.9) return '极高'
	if (totalAccuracy >= 0.7) return '很好'
	if (totalAccuracy >= 0.5) return '良好'
	if (totalAccuracy >= 0.3) return '一般'
	return '需要提高'
}

// 保存游戏数据
const saveGameData = () => {
	const gameData = {
		date: new Date().toISOString(),
		difficulty: selectedDifficulty.value,
		maxLevel: maxLevel.value,
		finalScore: finalScore.value,
		averageReactionTime: averageReactionTime.value,
		grade: getGrade(),
		timestamp: new Date().toISOString(),
		reactionTimes: [...reactionTimes.value],
		score: score.value
	}
	
	// 获取历史数据
	const historyKey = 'numberHistory'
	let history = []
	try {
		const stored = uni.getStorageSync(historyKey)
		if (stored) {
			history = JSON.parse(stored)
		}
	} catch (e) {
		console.error('读取历史数据失败:', e)
	}
	
	// 添加新记录
	history.unshift(gameData)
	
	// 只保留最近50条记录
	if (history.length > 50) {
		history = history.slice(0, 50)
	}
	
	// 保存数据
	try {
		uni.setStorageSync(historyKey, JSON.stringify(history))
	} catch (e) {
		console.error('保存历史数据失败:', e)
	}
	
	// 触发成就系统检查
	triggerAchievementCheck()
}

// 触发成就系统检查
const triggerAchievementCheck = () => {
	try {
		// 检查数字记忆成就
		if (maxLevel.value >= 12) {
			const numberTrigger = {
				type: 'number_memory',
				value: maxLevel.value,
				timestamp: new Date().toISOString()
			}
			uni.setStorageSync('numberMemoryTrigger', numberTrigger)
		}
		
		// 检查测试完成成就
		const testCompleteTrigger = {
			type: 'test_completed',
			value: 1,
			timestamp: new Date().toISOString()
		}
		uni.setStorageSync('testCompleteTrigger', testCompleteTrigger)
		
		// 检查完美分数成就（达到15级）
		if (maxLevel.value >= 15) {
			const perfectTrigger = {
				type: 'perfect_score',
				value: 1,
				timestamp: new Date().toISOString()
			}
			uni.setStorageSync('perfectScoreTrigger', perfectTrigger)
		}
		
		// 检查时间相关成就
		const currentHour = new Date().getHours()
		if (currentHour >= 22 || currentHour <= 6) {
			const nightTrigger = {
				type: 'night_test',
				value: 1,
				timestamp: new Date().toISOString()
			}
			uni.setStorageSync('nightTestTrigger', nightTrigger)
		} else if (currentHour >= 5 && currentHour <= 8) {
			const earlyTrigger = {
				type: 'early_test',
				value: 1,
				timestamp: new Date().toISOString()
			}
			uni.setStorageSync('earlyTestTrigger', earlyTrigger)
		}
	} catch (e) {
		console.error('触发成就检查失败:', e)
	}
}

// 清除所有定时器
const clearAllTimers = () => {
	if (countdownTimer) {
		clearInterval(countdownTimer)
		countdownTimer = null
	}
	if (showTimer) {
		clearTimeout(showTimer)
		showTimer = null
	}
	if (progressTimer) {
		clearInterval(progressTimer)
		progressTimer = null
	}
	if (timeTimer) {
		clearInterval(timeTimer)
		timeTimer = null
	}
}

// 组件卸载时清理
onUnmounted(() => {
	clearAllTimers()
})
</script>

<style lang="scss" scoped>
.number-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	padding: 40rpx 30rpx;
	color: white;
}

// 说明页面样式
.instruction-section {
	text-align: center;
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 60rpx;
		color: #fff;
	}
	
	.instruction-content {
		margin-bottom: 60rpx;
		
		.instruction-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			padding: 20rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			
			.icon {
				font-size: 36rpx;
				margin-right: 20rpx;
			}
			
			.text {
				font-size: 28rpx;
				flex: 1;
				text-align: left;
			}
		}
	}
	
	.difficulty-selector {
		margin-bottom: 60rpx;
		
		.difficulty-title {
			font-size: 32rpx;
			margin-bottom: 30rpx;
			font-weight: bold;
		}
		
		.difficulty-options {
			display: flex;
			gap: 20rpx;
			
			.difficulty-option {
				flex: 1;
				padding: 30rpx 20rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 15rpx;
				border: 2rpx solid transparent;
				transition: all 0.3s;
				
				&.active {
					background: rgba(255, 255, 255, 0.2);
					border-color: #fff;
					transform: scale(1.05);
				}
				
				.difficulty-name {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				.difficulty-desc {
					font-size: 22rpx;
					opacity: 0.8;
				}
			}
		}
	}
	
	.start-btn {
		width: 300rpx;
		height: 80rpx;
		background: linear-gradient(45deg, #ff6b6b, #ee5a24);
		color: white;
		border: none;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
		transition: all 0.3s;
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
		}
	}
}

// 准备页面样式
.ready-section {
	text-align: center;
	padding-top: 200rpx;
	
	.ready-title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 60rpx;
	}
	
	.ready-info {
		margin-bottom: 80rpx;
		
		.level-info {
			font-size: 36rpx;
			margin-bottom: 20rpx;
			color: #ffd700;
		}
		
		.sequence-info {
			font-size: 28rpx;
			opacity: 0.8;
		}
	}
	
	.countdown {
		font-size: 120rpx;
		font-weight: bold;
		color: #ffd700;
		animation: pulse 1s infinite;
	}
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

// 显示数字页面样式
.showing-section {
	.game-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		
		.level-indicator {
			font-size: 32rpx;
			font-weight: bold;
			color: #ffd700;
		}
		
		.progress-bar {
			width: 200rpx;
			height: 8rpx;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 4rpx;
			overflow: hidden;
			
			.progress {
				height: 100%;
				background: #ffd700;
				transition: width 0.1s;
			}
		}
	}
	
	.instruction-text {
		text-align: center;
		font-size: 28rpx;
		margin-bottom: 60rpx;
		opacity: 0.9;
	}
	
	.number-display {
		text-align: center;
		margin-bottom: 60rpx;
		
		.number-sequence {
			font-size: 80rpx;
			font-weight: bold;
			color: #ffd700;
			background: rgba(255, 255, 255, 0.1);
			padding: 40rpx;
			border-radius: 20rpx;
			letter-spacing: 8rpx;
			box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2);
			animation: glow 2s ease-in-out infinite alternate;
		}
	}
	
	.time-remaining {
		text-align: center;
		font-size: 32rpx;
		color: #ffd700;
		font-weight: bold;
	}
}

@keyframes glow {
	0% { box-shadow: 0 8rpx 30rpx rgba(255, 215, 0, 0.2); }
	100% { box-shadow: 0 8rpx 30rpx rgba(255, 215, 0, 0.6); }
}

// 输入页面样式
.input-section {
	.game-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		
		.level-indicator {
			font-size: 32rpx;
			font-weight: bold;
			color: #ffd700;
		}
		
		.input-progress {
			font-size: 28rpx;
			color: #ffd700;
		}
	}
	
	.instruction-text {
		text-align: center;
		font-size: 28rpx;
		margin-bottom: 40rpx;
		opacity: 0.9;
	}
	
	.input-area {
		.input-display {
			text-align: center;
			margin-bottom: 40rpx;
			
			.input-label {
				font-size: 24rpx;
				margin-bottom: 20rpx;
				opacity: 0.8;
			}
			
			.input-value {
				font-size: 60rpx;
				font-weight: bold;
				color: #ffd700;
				background: rgba(255, 255, 255, 0.1);
				padding: 30rpx;
				border-radius: 15rpx;
				min-height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				letter-spacing: 4rpx;
				border: 2rpx dashed rgba(255, 215, 0, 0.5);
			}
		}
		
		.number-keyboard {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 15rpx;
			margin-bottom: 40rpx;
			
			.keyboard-btn {
				aspect-ratio: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 15rpx;
				font-size: 36rpx;
				font-weight: bold;
				transition: all 0.3s;
				border: 2rpx solid transparent;
				
				&:active {
					background: rgba(255, 215, 0, 0.3);
					border-color: #ffd700;
					transform: scale(0.95);
				}
			}
		}
		
		.input-actions {
			display: flex;
			justify-content: center;
			gap: 20rpx;
		}
	}
}

// 结果页面样式
.result-section {
	text-align: center;
	
	.result-header {
		margin-bottom: 40rpx;
		
		.result-icon {
			font-size: 80rpx;
			margin-bottom: 20rpx;
		}
		
		.result-title {
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	
	.number-comparison {
		margin-bottom: 40rpx;
		
		.comparison-row {
			margin-bottom: 20rpx;
			
			.comparison-label {
				font-size: 24rpx;
				margin-bottom: 10rpx;
				opacity: 0.8;
			}
			
			.comparison-value {
				font-size: 48rpx;
				font-weight: bold;
				padding: 20rpx;
				border-radius: 10rpx;
				letter-spacing: 4rpx;
				
				&.correct {
					background: rgba(76, 175, 80, 0.3);
					color: #4caf50;
					border: 2rpx solid #4caf50;
				}
				
				&.wrong {
					background: rgba(244, 67, 54, 0.3);
					color: #f44336;
					border: 2rpx solid #f44336;
				}
			}
		}
	}
	
	.accuracy-display {
		margin-bottom: 40rpx;
		
		.accuracy-title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		
		.digit-comparison {
			display: flex;
			justify-content: center;
			gap: 10rpx;
			flex-wrap: wrap;
			margin-bottom: 20rpx;
			
			.digit-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 10rpx;
				border-radius: 8rpx;
				min-width: 60rpx;
				
				&.correct {
					background: rgba(76, 175, 80, 0.2);
					border: 2rpx solid #4caf50;
				}
				
				&.wrong {
					background: rgba(244, 67, 54, 0.2);
					border: 2rpx solid #f44336;
				}
				
				.digit-correct {
					font-size: 24rpx;
					font-weight: bold;
					color: #4caf50;
				}
				
				.digit-user {
					font-size: 20rpx;
					opacity: 0.8;
				}
			}
		}
		
		.accuracy-rate {
			font-size: 28rpx;
			font-weight: bold;
			color: #ffd700;
		}
	}
	
	.result-stats {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
		
		.stat-item {
			text-align: center;
			
			.stat-value {
				font-size: 36rpx;
				font-weight: bold;
				color: #ffd700;
				margin-bottom: 10rpx;
			}
			
			.stat-label {
				font-size: 22rpx;
				opacity: 0.8;
			}
		}
	}
	
	.result-actions {
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}
}

// 最终结果页面样式
.final-section {
	text-align: center;
	
	.final-header {
		margin-bottom: 60rpx;
		
		.final-icon {
			font-size: 100rpx;
			margin-bottom: 20rpx;
		}
		
		.final-title {
			font-size: 48rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		
		.final-subtitle {
			font-size: 32rpx;
			color: #ffd700;
		}
	}
	
	.final-stats {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
		margin-bottom: 60rpx;
		
		.final-stat-item {
			padding: 30rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			
			.final-stat-value {
				font-size: 48rpx;
				font-weight: bold;
				color: #ffd700;
				margin-bottom: 10rpx;
			}
			
			.final-stat-label {
				font-size: 24rpx;
				opacity: 0.8;
			}
		}
	}
	
	.performance-analysis {
		margin-bottom: 60rpx;
		
		.analysis-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
		
		.analysis-content {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			padding: 30rpx;
			
			.analysis-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.analysis-label {
					font-size: 28rpx;
				}
				
				.analysis-value {
					font-size: 28rpx;
					font-weight: bold;
					color: #ffd700;
				}
			}
		}
	}
	
	.final-actions {
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}
}

// 通用按钮样式
.action-btn {
	padding: 20rpx 40rpx;
	border-radius: 25rpx;
	font-size: 28rpx;
	font-weight: bold;
	border: none;
	transition: all 0.3s;
	min-width: 120rpx;
	
	&.primary {
		background: linear-gradient(45deg, #4caf50, #45a049);
		color: white;
		box-shadow: 0 4rpx 15rpx rgba(76, 175, 80, 0.4);
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.4);
		}
	}
	
	&.secondary {
		background: rgba(255, 255, 255, 0.2);
		color: white;
		border: 2rpx solid rgba(255, 255, 255, 0.3);
		
		&:active {
			background: rgba(255, 255, 255, 0.3);
		}
		
		&:disabled {
			opacity: 0.5;
			pointer-events: none;
		}
	}
}
</style>
